<template>
  <div>
    <wz-table :columns="wzApplicationColumn" :use-index="true" :table-data="fileData">
      <template #sumReceiveAmount="{ row }">
        <div>{{ row.sumReceiveAmount || 0 }}</div>
      </template>
      <template #amount="{ row }">
        <div>{{ row.amount || 0 }}</div>
      </template>
      <!-- 出库数量 -->
      <template #osRealAmount="{ row }">
        <div v-if="+row.osRealAmount && +row.isOutElectrical !== 1" class="click-row" @click="handleMaterialRemovalVisible(row)">
          {{ row.osRealAmount }}
        </div>
        <div v-else>{{ row.osRealAmount || 0 }}</div>
      </template>
      <template #noReceiveAmount="{ row }">
        <div>{{ +row.noReceiveAmount || 0 }}</div>
      </template>
      <!-- 申请退库总数 -->
      <template #retreatAmount="{ row }">
        <div v-if="+row.retreatAmount" class="click-row" @click="handleBackVisible(row)">
          {{ row.retreatAmount || 0 }}
        </div>
        <div v-else>{{ row.retreatAmount || 0 }}</div>
      </template>
      <template #retreatRealAmount="{ row }">
        <div>{{ row.retreatRealAmount || 0 }}</div>
      </template>
      <template #canRetreatAmount="{ row }">
        <div>{{ row.canRetreatAmount || 0 }}</div>
      </template>
    </wz-table>
    <!--出库数量支持点击 点击后弹出页面  -->
    <materialOutDialog
      v-if="materialRemovalVisible"
      :material-removal-visible.sync="materialRemovalVisible"
      :current-row="currentRow"
    />

    <!-- 点击申请退库总数 -->
    <returnDetailDialog
      v-if="returnDetailDialogVisible"
      :material-removal-visible.sync="returnDetailDialogVisible"
      :current-row="currentRow"
    />
  </div>
</template>
  <script>
  const MATERIAL_INFO_FIRST = [
      // {
      //     label: '项目编码',
      //     prop: 'prcode',
      //     elProps: {
      //         'show-overflow-tooltip': true
      //     }
      // },
      {
          label: '物料编码',
          prop: 'categoryCode',
          elProps: {
              'show-overflow-tooltip': true
          }
      },
      {
          label: '物料名称',
          prop: 'categoryName',
          elProps: {
              'show-overflow-tooltip': true
          }
      },
      {
          label: '计量单位',
          prop: 'unit',
          elProps: {
              width: '100px',
              'show-overflow-tooltip': true
          }
      },
      {
          label: '主设备标识',
          prop: 'spuMainName',
          elProps: {
              width: '100px',
              'show-overflow-tooltip': true
          }
      },
      {
          label: '设计数量',
          prop: 'amount',
          elProps: {
              width: '100px',
              'show-overflow-tooltip': true
          }
      },
      {
          label: '领用数量',
          prop: 'sumReceiveAmount',
          elProps: {
              width: '80px',
              'show-overflow-tooltip': true
          }
      },
      {
          label: '出库数量',
          prop: 'osRealAmount',
          elProps: {
              width: '80px',
              'show-overflow-tooltip': true
          }
      },
      {
          label: '可领用数量',
          prop: 'noReceiveAmount',
          elProps: {
              width: '100px',
              'show-overflow-tooltip': true
          }
      },
      {
          label: '申请退库数量',
          prop: 'retreatAmount',
          elProps: {
              width: '100px',
              'show-overflow-tooltip': true
          }
      },
      {
          label: '完成退库数量',
          prop: 'retreatRealAmount',
          elProps: {
              width: '100px',
              'show-overflow-tooltip': true
          }
      },
      {
          label: '可申请退库数量',
          prop: 'canRetreatAmount',
          elProps: {
              width: '120px',
              'show-overflow-tooltip': true
          }
      }
  ]
  // 系统常量配置
  import wzTable from './cTable'
  import materialOutDialog from '../dialogComponents/materialOutDialog.vue'
  import returnDetailDialog from '../dialogComponents/returnDetailDialog.vue'
  export default {
      name: 'LogisticsBack',
      components: {
          wzTable,
          materialOutDialog,
          returnDetailDialog
      },
      props: {
          fileData: {
              type: Array,
              default: () => []
          }
      },
      data() {
          return {
              wzApplicationColumn: [],
              materialRemovalVisible: false,
              cancelRetreatVisible: false,
              returnDetailDialogVisible: false,
              currentRow: {}
          }
      },
      computed: {
          // 整体项目展示项目编码其他都不展示
          getManageMode() {
              if (this.$route.query?.manageMode === '03') {
                  return true
              } else {
                  return false
              }
          }
      },
      created() {
          // MATERIAL_INFO_FIRST : MATERIAL_INFO_FIRST.filter(item => item.prop !== 'prcode')
          this.wzApplicationColumn = MATERIAL_INFO_FIRST
      },
      methods: {
          handleMaterialRemovalVisible(row) {
              this.materialRemovalVisible = true
              this.currentRow = row
          },
          // 点击申请退库梳理
          handleBackVisible(row) {
              this.currentRow = row
              this.returnDetailDialogVisible = true
          }
      }
  }
  </script>
  <style scoped>
  .el-upload--text {
      width: 100%;
  }

  .btnflex {
      display: flex;
      justify-content: space-between;
  }

  .el-table th {
      padding: 0px 0;
      text-align: center;
      font-size: 12px;
      color: #333333;
      letter-spacing: 0;
  }

  .el-table td {
      padding: 0px 0;
      text-align: center;
      font-size: 2px;
      color: #333333;
      letter-spacing: 0;
  }

  .click-row {
      color: #53c7f8;
      cursor: pointer;
  }
  </style>
